import { useState, useEffect, } from 'react'
import { HomeOutlined, RightOutlined } from '@ant-design/icons';
import { Breadcrumb, Divider, } from 'antd';
import axios from 'axios'
import "./index.less"
import Winery from './Winery';
import FamousWine from './FamousWine';
import Variety from './Variety';

export default function TastingParty() {
    const [titleText, setTitleText] = useState<any>([
        "品酒百科", "工艺与历史",
    ])
    const [article, setDataArticle] = useState<any>([])
    const [choose, setChoose] = useState<number>(0)
    const onChange: any = (num: number) => {
        setChoose(choose => choose = num)
    };
    useEffect(() => {
        // axios.get("src/assets/json/wineTast.json").then((response) => {
        axios.get("http://localhost:8080/api/article").then((response) => {
            if (article == "") {
                setDataArticle(response.data.result);
            }
        });
    }, [article]);
    function ContentShow() {
        switch (choose) {
            case 0: return <Wine />;
            case 1: return <Wine />;
            case 3: return <FamousWine />;
            case 4: return <Winery />;
            case 5: return <Variety />;
            default: return null;
        }
    }
    function Wine():any {
        return (
            article.length ? <div>
                {article[choose].map((item: any) => {
                    return <div key={item.id} className="article">
                        <div className="article_img">
                            <img src={item.img} alt="" />
                        </div>
                        <div className="article_text">
                            <p className="article_text_title">{item.title}</p>
                            <hr />
                            <span className="article_text_content">{item.content}</span>
                        </div>
                    </div>
                })}
            </div> : ""
        )
    }
    return (
        <div className='tasting_party'>
            <div className="bread">
                <Breadcrumb separator="" style={{ background: 'none' }}>
                    <Breadcrumb.Item><span><HomeOutlined style={{ marginRight: '5px' }} />您现在的位置</span></Breadcrumb.Item>
                    <Breadcrumb.Separator>：</Breadcrumb.Separator>
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                    <Breadcrumb.Separator>{`>`}</Breadcrumb.Separator>
                    <Breadcrumb.Item>品酒会</Breadcrumb.Item>
                    <Breadcrumb.Separator>{`>`}</Breadcrumb.Separator>
                    <Breadcrumb.Item>{titleText[choose]}</Breadcrumb.Item>
                </Breadcrumb>
                <Divider className='divider' />
            </div>
            <div className="content">
                <div className="title_name">
                    <div className="border">
                        <div className="title_name_red">
                            <span>品酒会</span>
                        </div>
                        <div className="title_text">
                            <div className="title_text_div"
                                onClick={() => onChange(4)}>
                                <span className='text'>宁夏葡萄酒酒庄</span>
                                <span className='icon'><RightOutlined /></span>
                            </div>
                            <div className="title_text_div"
                                onClick={() => onChange(5)}>
                                <span className='text'>葡萄品种</span>
                                <span className='icon'><RightOutlined /></span>
                            </div>
                            <div className="title_text_div"
                                onClick={() => onChange(3)}>
                                <span className='text'>世界名酒</span>
                                <span className='icon'><RightOutlined /></span>
                            </div>
                            {titleText.map((item: any, index: any) => (
                                <div className="title_text_div" key={index}
                                    onClick={() => onChange(index)}>
                                    <span className='text'>{item}</span>
                                    <span className='icon'><RightOutlined /></span>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
                <div className="article_content">
                    <ContentShow />
                </div>
            </div>
        </div>
    )
}
